<template>
  <div class="guess">
      <div class="guess-desc" :class="[guessDescChange]">
          <div>猜你喜欢</div>
      </div>
      <router-link
       tag="div"
       class="guess-content" 
       v-for="item of guessList" 
       :key='item.id'
       :to='"/detail/"+item.id'
       >
          <div class="guess-content-img">
              <img :src="item.imgUrl" >
              <div>{{item.rank}}</div>
          </div>
          <div class="guess-content-desc">
              {{item.desc}}
          </div>
           <div class="guess-content-prise">
              <div class="guess-content-prise-left">
                  酒店距离{{item.distance}}Km
              </div>
              <div  class="guess-content-prise-right">
                  <span>￥{{item.prise}}</span>起
              </div>
          </div>
      </router-link>
  </div>
</template>

<script>
export default {
  name: 'homeGuess',
//   props:{
//       guessList:Array
//   },
  data () {
    return {
           guessDescChange:'',
           guessList:[
               {
                   id:'00001',
                  imgUrl: require('@/assets/img/qujiang.jpg'),
                  rank:'1176.98点评。98%',
                  desc:'西安国际会议中心位于著名的景区大雁塔南侧，占地面积13万平方米。',
                  distance:'5.79',
                  prise:'299'
               },
               {
                   id:'00002',
                  imgUrl: require('@/assets/img/qujiang.jpg'),
                  rank:'1176.98点评。98%',
                  desc:'西安国际会议中心位于著名的景区大雁塔南侧，占地面积13万平方米。',
                  distance:'5.79',
                  prise:'299'
               },
               {
                   id:'00003',
                  imgUrl: require('@/assets/img/qujiang.jpg'),
                  rank:'1176.98点评。98%',
                  desc:'西安国际会议中心位于著名的景区大雁塔南侧，占地面积13万平方米。',
                  distance:'5.79',
                  prise:'299'
               },
               {
                   id:'00004',
                  imgUrl: require('@/assets/img/qujiang.jpg'),
                  rank:'1176.98点评。98%',
                  desc:'西安国际会议中心位于著名的景区大雁塔南侧，占地面积13万平方米。',
                  distance:'5.79',
                  prise:'299'
               },
               {
                   id:'00005',
                  imgUrl: require('@/assets/img/qujiang.jpg'),
                  rank:'1176.98点评。98%',
                  desc:'西安国际会议中心位于著名的景区大雁塔南侧，占地面积13万平方米。',
                  distance:'5.79',
                  prise:'299'
               }
           ]
    }
  },
  methods:{
      scrollchange(){
        let height = document.documentElement.scrollTop
        //console.log(height) //判断屏幕滚动得距离
        if(height>600){
           this.guessDescChange='guessDescChange'
        }else{
            this.guessDescChange=''
        }
      }
  },
  mounted(){
      window.addEventListener('scroll',
      this.scrollchange)
  }
}
</script>

<style lang="stylus" scoped>
 .guess
  border-top:.3rem solid #eee
  background:#fff
  .guess-desc
    overflow:hidden
    height:0
    padding-bottom:10%
    text-align:center
    color:#23beae
   .guessDescChange
     position :fixed
     top:.9rem
     left :0
     width :100%
     background :#fff
     z-index:100
  .guess-desc > div
    overflow:hidden
    width:25%
    height:0
    padding-bottom:6%
    margin:0 auto
    padding-top:.23rem
    border-bottom:.1rem solid #23beae
  .guess-content
    overflow:hidden
    width:92%
    height:0
    padding-bottom:64%
    margin:0 auto
    .guess-content-img
      position:relative
      overflow:hidden
      height:0
      padding-bottom:48.3%      
    .guess-content-img >img
      max-width:100%
    .guess-content-img >div
      position:absolute
      bottom:.2rem
      left:.1rem
      color:#fff
    .guess-content-desc
      overflow:hidden
      height:0
      padding-bottom:12%
      text-align:left
      padding-top:.1rem
      text-indent:.1rem
      font-size:.28rem
      font-weight:bold
      letter-spacing:.01rem
      line-height:.35rem
    .guess-content-prise
      overflow:hidden
      height:0
      padding-bottom:10%
      .guess-content-prise-left
        float:left
        color:#aaa
      .guess-content-prise-right
        float:right
        margin-right:.1rem
      .guess-content-prise-right > span
        color:red
        font-weight:bold
        font-size:.4rem
</style>
